import React, { PureComponent } from "react"

//1. 对自己的业务代码有依赖
// import store from '../store'
// export default function connect(mapStateToProps, mapDispatchToProps) {
//   return function enHanceHOC(WrappedComponent) {
//     return class extends PureComponent {
//       constructor(props) {
//         super(props)

//         this.state = {
//           storeState: mapStateToProps(store.getState())
//         }
//       }

//       componentDidMount() {
//         this.unsubscribe = store.subscribe(() => {
//           this.setState({
//             storeState: mapStateToProps(store.getState())
//           })
//         })
//       }

//       componentWillUnmount() {
//         this.unsubscribe()
//       }
      
//       render() {
//         return <WrappedComponent  {...this.props} 
//                                   {...mapStateToProps(store.getState())}
//                                   {...mapDispatchToProps(store.dispatch)} />
//       }
//     }
//   }
// }

//2.经过 context
import { StoreContext } from "./context";
export default function connect(mapStateToProps, mapDispatchToProps) {
  return function enHanceHOC(WrappedComponent) {
    class EnhanceComponent extends PureComponent {
      constructor(props, context) {
        super(props, context)
        this.state = {
          storeState: mapStateToProps(context.getState())
        }
      }

      componentDidMount() {
        this.unsubscribe = this.context.subscribe(() => {
          this.setState({
            storeState: mapStateToProps(this.context.getState())
          })
        })
      }

      componentWillUnmount() {
        this.unsubscribe()
      }
      
      render() {
        return <WrappedComponent  {...this.props} 
                                  {...mapStateToProps(this.context.getState())}
                                  {...mapDispatchToProps(this.context.dispatch)} />
      }
    }

    EnhanceComponent.contextType = StoreContext;

    return EnhanceComponent;
  }
}